<template>
  <div class="box">
    <div class="main pb10">
      <div class="condition">
        <div class="f aic mb30">
          <div class="f16 bold">科目：</div>
          <div class="f condition-item">
            <div  @click="handleSubjectChange('0')" :class="{ active: (query.paperSubject == '0') }">
              全部
            </div>
            <div v-for="item in subjectList" :key="item.dictValue"
             @click="handleSubjectChange(item.dictValue)"
            :class="{ active: (query.paperSubject === item.dictValue) }">
              {{ item.dictLabel }}
            </div>
          </div>
        </div>
        <div class="f aic mb30">
          <div class="f16 bold">类型：</div>
          <div class="f condition-item">
            <div @click="handleTypeChange('0')" :class="{ active: (query.paperType == '0') }">
              全部
            </div>
            <div v-for="item in typeList" :key="item.dictValue"
             @click="handleTypeChange(item.dictValue)"
            :class="{ active: (query.paperType === item.dictValue) }">
              {{ item.dictLabel }}
            </div>
          </div>
        </div>
        <div class="f aic">
          <div class="f16 bold">状态：</div>
          <div class="f condition-item">
            <div @click="handleStatusChange(3)" :class="{ active: query.isExame == 3 }">
              全部
            </div>
            <div @click="handleStatusChange(1)" :class="{ active: query.isExame == 1 }">
              已考试
            </div>
            <div @click="handleStatusChange(0)" :class="{ active: query.isExame == 0 }">
              未考试
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main pt50">
    <div class="f fw">
      <div v-for="(item, index) in examList" :key="index" class="course-item pointer">
        <img :src="getImageUrl(item.fileInfos)" alt="" width="100%" height="152" />
        <div class="f14 pl10 pr10 pt13 pb20">
          <div class="mb10 tem">{{ item.exameTitle }}</div>
          <div class="course-content tem2" style="height: 48px;">
            {{ item.exameContent }}
          </div>
          <div class="course-content mt10 mb15">
            总分 · {{ item.paperScoreCount }}分
          </div>
          <div class="f jcsb aic">
            <div class="C0088FF" @click="goReport(item)">报告查看</div>
            <el-tag type="danger" color="#F01414" effect="dark" @click="handleGoToAnswer(item)">
              开始考试
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="f column aie">
      <el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :page-sizes="[8, 16, 50, 100]"
        layout=" prev, pager, next, jumper" :total="total" @size-change="querySizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup >
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getDicts, exameList } from "@/api/previousExam";  
import { onMounted } from "vue";
import { ElMessage } from "element-plus";

const route = useRouter();
const subjectList = ref([])
const typeList = ref([])
const examList = ref([]);
const query = ref({
  pageNum: 1,
  pageSize: 8,
  paperSubject: '0',
  paperType: '0',
  isExame: 3,
});
const total = ref(0);
onMounted(() => {
  getPaperListData();
});
// 获取试卷列表
const getPaperListData = async () => {
  const subjectRes = await getDicts('subject');
  if (subjectRes.code === 200) {
    subjectList.value = subjectRes.data;    
  }
  const typeRes = await getDicts('course_type')
  if (typeRes.code === 200) {
    typeList.value = typeRes.data;
  }
  getList();
};
const getList = () => {
  exameList(query.value).then((res) => {
    if (res.code!== 200) {
      return;
    }
    examList.value = res.rows;
    total.value = res.total;
  });
}
// 查看报告
const goReport = (item) => {
   if (item.isExame != 1) {
    // 未考试
    ElMessage.warning('请先完成考试, 才能查看报告！');
    return;
   }
  route.push({
    path: '/report',
    query: {
      id: item.exameId
    }
  });
}
const querySizeChange = (val) => {
  query.value.pageSize = val;
  getList();
};
const handleCurrentChange = (val) => {
  query.value.pageNum = val;
  getList();
}
// 
const handleSubjectChange = (val) => {
  query.value.paperSubject = val;
  query.value.pageNum = 1;
  getList();
};
const handleTypeChange = (val) => {
  console.log("🚀 ~ handleTypeChange ~ val:", val)
  query.value.paperType = val;
  query.value.pageNum = 1;
  getList();
}
const handleStatusChange = (val) => {
  query.value.isExame = val;
  query.value.pageNum = 1;
  getList();
}
const getImageUrl = (infos) => {
  if (infos && infos.length > 0) {
    return infos[0].url;    
  }else {
    return '';
  }
};
const handleGoToAnswer = (item) => {
  route.push({
    path: '/answer',
    query: {
      exameId: item.exameId
    }
  });
}
const goPath = (path) => {
  route.push(path);
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
